<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="../../static/js/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="../../static/js/jquery-3.3.1.min.js"></script>
    <script src="../../static/js/utils.js"></script>
    <style>
        .el-dialog {
            position: relative;
            margin: 0 auto 50px;
            background: #FFF;
            border-radius: 2px;
            -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
            box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
            box-sizing: border-box;
            width: 70%;
        }

        .el-color-picker__icon, .el-input, .el-textarea {
            display: inline-block;
            width: 50%;
        }

        .demo-form-inline .el-form-item{
            width: 250px;
        }

        .demo-form-inline .el-form-item input{
            width: 150px;
        }
    </style>
</head>
<body>
<div id="app">
    <div>
        <el-row :gutter="20">
            <el-col :span="12" :offset="8">
                <h1 style="color: rgb(78, 78, 250);">查看已审核订单</h1>
            </el-col>
        </el-row>

        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="orderId" label="编号" width="200">
            </el-table-column>
            <el-table-column prop="clientName" label="客户" width="200">
            </el-table-column>
            <el-table-column prop="creator" label="创建人" width="200">
            </el-table-column>
            <el-table-column prop="audit_status" label="状态" width="200">
                <template slot-scope="scope">
                    {{ scope.row.audit_status == '1' ? '审核通过' : '审核不通过'}}
                </template>
            </el-table-column>
            <el-table-column prop="lastModifier" label="最后修改人" width="200">
            </el-table-column>
            <el-table-column label="详细信息" width="200">
                <template slot-scope="scope">
                    <el-button @click="particulars(scope.row.id)" type="text" size="small">详细信息</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog title="订单详情" :visible.sync="dialogTableVisible">
            <el-form :inline="true" :model="formData" class="demo-form-inline">
                <el-form-item label="编号:">
                    <el-input disabled v-model="formData.orderId" placeholder="编号"></el-input>
                </el-form-item>
                <el-form-item label="客户:">
                    <el-link type="success" @click="clientParticulars(formData.client_id)">查看<i class="el-icon-view el-icon--right"></i></el-link>
                    <el-input disabled v-model="formData.clientName" placeholder="客户"></el-input>
                </el-form-item>
                <el-form-item label="要货日期:" style="width: 340px" width="400px">
                    <el-input  disabled v-model="formData.createTime" placeholder="要货日期"></el-input>
                </el-form-item>
            </el-form>
            <el-table :data="particularsData">
                <el-table-column property="partCode" label="编号" width="150"></el-table-column>
                <el-table-column property="partName" label="名称" width="150"></el-table-column>
                <el-table-column property="price" label="单价" width="150"></el-table-column>
                <el-table-column property="orderCount" label="订购数量" width="150"></el-table-column>
                <el-table-column property="payCount" label="已付数量" width="150"></el-table-column>
                <el-table-column property="totalPrice" label="总价" width="150"></el-table-column>
            </el-table>
            <el-dialog width="90%" title="客户详情" :visible.sync="innerVisibleClient" append-to-body>
                <el-descriptions class="margin-top" :column="2" border>
                    <el-descriptions-item label="客户编号">{{clientForm.clientnumber}}</el-descriptions-item>
                    <el-descriptions-item label="客户名称">{{clientForm.clientname}}</el-descriptions-item>
                    <el-descriptions-item label="简称">{{clientForm.shortcut}}</el-descriptions-item>
                    <el-descriptions-item label="客户经理">{{clientForm.clientmanager}}</el-descriptions-item>
                    <el-descriptions-item label="联系人">{{clientForm.linkman}}</el-descriptions-item>
                    <el-descriptions-item label="电话号码">{{clientForm.phonenumber}}</el-descriptions-item>
                    <el-descriptions-item label="邮政编码">{{clientForm.postalcode}}</el-descriptions-item>
                    <el-descriptions-item label="客户地址">{{clientForm.clientaddress}}</el-descriptions-item>
                    <el-descriptions-item label="电子邮箱">{{clientForm.email}}</el-descriptions-item>
                    <el-descriptions-item label="开户银行">{{clientForm.openbank}}</el-descriptions-item>
                    <el-descriptions-item label="银行账号">{{clientForm.bandnumber}}</el-descriptions-item>
                    <el-descriptions-item label="税号">{{clientForm.taxnumber}}</el-descriptions-item>
                    <el-descriptions-item label="省份">{{clientForm.province}}</el-descriptions-item>
                    <el-descriptions-item label="类型">{{clientForm.type}}</el-descriptions-item>
                    <el-descriptions-item label="备注">{{clientForm.remark}}</el-descriptions-item>
                </el-descriptions>
            </el-dialog>
        </el-dialog>
        <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           :current-page="currentPage1" :page-sizes="[5, 10, 15, 20]" :page-size="100"
                           layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
    </div>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            id: 0,
            page: 1,
            limit: 5,
            total: 0,
            currentPage1: 1,
            statusSelect: 0,
            tableData: [],
            particularsData: [],
            dialogTableVisible: false,
            innerVisible: false,
            innerVisibleClient: false,
            clientForm:{},
            formData:{
                orderId: '',
                id: '',
                clientName: '',
                createTime: ''
            }
        },
        methods: {
            select() {
                let _this = this;
                selectAjax("get", '/orderstable/listStatus', { status: '0',page: _this.page, limit: _this.limit }, _this.tableData2);
            },
            //查询成功后做的处理
            tableData2(data) {
                this.tableData = data.data.data;
                this.total = data.data.total;
            },
            //查看详情
            particulars(id){
                let _this = this;
                _this.dialogTableVisible = true;
                selectAjax("get", '/orderstable/getById', { id: id }, _this.particularsData2)
            },
            particularsData2(data){
                this.formData = data.data.data[0]
                this.particularsData = data.data.partsMapList;
            },
            //客户详情
            clientParticulars(id){
                let _this = this;
                _this.innerVisibleClient = true;
                selectAjax("get", '/clienttable/getById/'+id, null, function (data) {
                    _this.clientForm = data.data;
                })
            },
            //分页
            handleSizeChange(val) {
                let status = this.statusSelect;
                this.limit = val;
                if (status == 0){
                    this.select();
                }else if (status == 1)
                    this.lookOver();

            },
            handleCurrentChange(val) {
                let status = this.statusSelect;
                this.page = val;
                if (status == 0){
                    this.select();
                }else if (status == 1)
                    this.lookOver();
            },

            closePage(statusSelect) {
                this.page = 1;
                this.limit = 5;
                this.total = 0;
                this.currentPage1 = 1;
                this.statusSelect = statusSelect;
            }
        },
        mounted() {
            this.select();
        },
        watch:{
            innerVisible(val){
                if (!val){
                    this.closePage(0);
                    this.select();
                }
            }
        }
    })
</script>
</body>
</html>